<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜单测试</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: 250px;
            height: 100vh;
            background-color: #1f2937;
            color: white;
            z-index: 20;
            overflow-y: auto;
        }
        .sidebar-nav .nav-link {
            display: flex;
            align-items: center;
            padding: 0.5rem 0.75rem;
            font-size: 0.875rem;
            border-radius: 0.25rem;
            color: #d1d5db;
            text-decoration: none;
        }
        .sidebar-nav .nav-link:hover {
            background-color: #374151;
            color: white;
        }
        .sidebar-nav .nav-link.active {
            background-color: #374151;
            color: white;
        }
        .submenu {
            padding-left: 2rem;
            margin-top: 0.25rem;
        }
        .submenu .nav-link {
            color: #9ca3af;
        }
        .hidden {
            display: none;
        }
        .rotate-180 {
            transform: rotate(180deg);
        }
        .transition-transform {
            transition: transform 0.2s ease;
        }
        .ml-\[250px\] {
            margin-left: 250px;
        }
        .flex {
            display: flex;
        }
        .items-center {
            align-items: center;
        }
        .justify-between {
            justify-content: space-between;
        }
        .space-y-1 > * + * {
            margin-top: 0.25rem;
        }
        .pl-8 {
            padding-left: 2rem;
        }
        .mt-1 {
            margin-top: 0.25rem;
        }
        .w-5 {
            width: 1.25rem;
        }
        .text-center {
            text-align: center;
        }
        .mr-2 {
            margin-right: 0.5rem;
        }
        .font-medium {
            font-weight: 500;
        }
        .text-xs {
            font-size: 0.75rem;
        }
        .p-4 {
            padding: 1rem;
        }
        .border-b {
            border-bottom: 1px solid;
        }
        .border-gray-800 {
            border-color: #1f2937;
        }
        .py-4 {
            padding-top: 1rem;
            padding-bottom: 1rem;
        }
    </style>
</head>
<body>
    <div class="flex">
        <!-- 侧边栏导航 -->
        <aside class="sidebar">
            <!-- 系统标题/Logo区域 -->
            <div class="flex items-center p-4 border-b border-gray-800">
                <i class="fas fa-tasks text-xl text-primary mr-2"></i>
                <span class="font-bold text-xl">项目管理系统</span>
            </div>
            
            <!-- 主导航菜单 -->
            <nav class="py-4">
                <ul class="space-y-1">
                    <li>
                        <a href="#" class="nav-link">
                            <i class="fas fa-home w-5 text-center mr-2"></i>
                            <span class="font-medium">首页</span>
                        </a>
                    </li>
                    <!-- 项目管理菜单 -->
                    <li>
                        <div class="project-menu">
                            <a href="#" class="nav-link" onclick="toggleMenu('project-submenu')">
                                <div class="flex items-center">
                                    <i class="fas fa-folder-open w-5 text-center mr-2"></i>
                                    <span class="font-medium">项目管理</span>
                                </div>
                                <i class="fas fa-chevron-down text-xs transition-transform" id="project-submenu-icon"></i>
                            </a>
                            <ul id="project-submenu" class="submenu hidden">
                                <li>
                                    <a href="#" class="nav-link">
                                        <i class="fas fa-chart-bar w-5 text-center mr-2"></i>
                                        <span>项目看板</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="nav-link">
                                        <i class="fas fa-list w-5 text-center mr-2"></i>
                                        <span>项目列表</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <!-- 系统管理菜单 -->
                    <li>
                        <div class="system-menu">
                            <a href="#" class="nav-link" onclick="toggleMenu('system-submenu')">
                                <div class="flex items-center">
                                    <i class="fas fa-cog w-5 text-center mr-2"></i>
                                    <span class="font-medium">系统管理</span>
                                </div>
                                <i class="fas fa-chevron-down text-xs transition-transform" id="system-submenu-icon"></i>
                            </a>
                            <ul id="system-submenu" class="submenu hidden">
                                <li>
                                    <a href="#" class="nav-link active">
                                        <i class="fas fa-user-cog w-5 text-center mr-2"></i>
                                        <span>用户管理</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </nav>
        </aside>

        <!-- 主要内容区域 -->
        <div class="ml-[250px] flex-1">
            <div class="p-4">
                <h1>菜单测试页面</h1>
                <p>请尝试点击左侧菜单，检查是否可以正常展开/折叠。</p>
                <div id="log" style="margin-top: 20px; padding: 10px; background-color: #f0f0f0; border: 1px solid #ccc;"></div>
            </div>
        </div>
    </div>

    <script>
        // 切换菜单展开/折叠 - 全局函数
        function toggleMenu(menuId) {
            const submenu = document.getElementById(menuId);
            const icon = document.getElementById(menuId + '-icon');
            
            // 获取所有子菜单
            const allSubmenus = document.querySelectorAll('[id$="-submenu"]');
            const allIcons = document.querySelectorAll('[id$="-submenu-icon"]');
            
            // 记录操作
            const log = document.getElementById('log');
            log.innerHTML += '<p>尝试切换菜单: ' + menuId + '</p>';
            
            if (submenu.classList.contains('hidden')) {
                // 展开菜单
                // 先折叠所有其他菜单
                allSubmenus.forEach(menu => {
                    if (menu.id !== menuId) {
                        menu.classList.add('hidden');
                        log.innerHTML += '<p>折叠菜单: ' + menu.id + '</p>';
                    }
                });
                
                // 重置所有其他菜单的图标
                allIcons.forEach(submenuIcon => {
                    if (submenuIcon.id !== menuId + '-icon') {
                        submenuIcon.classList.remove('rotate-180');
                    }
                });
                
                // 展开当前菜单
                submenu.classList.remove('hidden');
                icon.classList.add('rotate-180');
                log.innerHTML += '<p>展开菜单: ' + menuId + '</p>';
            } else {
                // 折叠菜单
                submenu.classList.add('hidden');
                icon.classList.remove('rotate-180');
                log.innerHTML += '<p>折叠菜单: ' + menuId + '</p>';
            }
        }
    </script>
</body>
</html>